<template>
<div>

   <md-steppers class="bbc">
    <md-step id="first" md-label="文章浏览排行榜" >
           <div >
               <el-card>
                  <TopView :TopViewList="TopViewList" ></TopView>
               </el-card>
           </div>
    </md-step>
    <md-step id="second" md-label="个人积分排行榜">
         <div >
               <el-card>
                  <TopScore :TopUserScore="TopUserScore" ></TopScore>
               </el-card>
           </div>
    </md-step>
      <md-step id="third" md-label="标签热度">
        <div >
              <el-card>
                 <TopTag :TopTagList="TopTagList" :VarTagListName="VarTagListName" :VarTagListtopicCount="VarTagListtopicCount"></TopTag>
              </el-card>
           </div>
      </md-step>

    </md-steppers>
</div>
</template>

<script>
import { GetTopView } from '@/api/post'
import { GetTopTag } from '@/api/tag'
import { GetTopUserScore } from '@/api/user'
import TopView from './T-View/TopView.vue'
import TopTag from './T-View/TopTag.vue'
import TopScore from './T-View/TopScore.vue'
export default {
  data () {
    return {
      TopTagList: [],
      VarTagListName: [],
      VarTagListtopicCount: [],
      xAxisData: [],
      seriesData: [],
      TopViewList: '',
      TopUserScore: ''
    }
  },
  methods: {
    init () {
      GetTopView().then((response) => {
        const { data } = response
        this.TopViewList = data
        // console.log(this.TopViewList)

        for (var i = 0; i <= this.TopViewList.length; i++) {
          this.xAxisData[i] = this.TopViewList[i].title
          this.seriesData[i] = this.TopViewList[i].view
          // window.localStorage.setItem('xAxisData', this.xAxisData)
          // window.localStorage.setItem('seriesData', this.seriesData)
          window.localStorage.setItem('xAxisData', JSON.stringify(this.xAxisData))
          window.localStorage.setItem('seriesData', JSON.stringify(this.seriesData))
        }
      })

      GetTopTag().then((value) => {
        const { data } = value
        this.TopTagList = data
        // console.log(this.TopTagList)
        for (var i = 0; i <= this.TopTagList.length; i++) {
          this.VarTagListName[i] = this.TopTagList[i].name
          this.VarTagListtopicCount[i] = this.TopTagList[i].topicCount
          window.localStorage.setItem('VarTagListName', JSON.stringify(this.VarTagListName))
          window.localStorage.setItem('VarTagListtopicCount', JSON.stringify(this.VarTagListtopicCount))
        }
        // for (var i = 0; i <= 9; i++) {
        //   this.option2.series[0].data[i].value = this.VarTagListName[i]
        //   this.option2.series[0].data[i].name = this.VarTagListtopicCount[i]
        //   // this.VarTagList[i].topicCount = this.TopTagList[i].topicCount
        // }
      })

      GetTopUserScore().then((res) => {
        const { data } = res
        this.TopUserScore = data
        // console.log(this.TopUserScore)
        for (var i = 0; i <= this.TopUserScore.length; i++) {
          this.xAxisData[i] = this.TopUserScore[i].alias
          this.seriesData[i] = this.TopUserScore[i].score
          // window.localStorage.setItem('xAxisData', this.xAxisData)
          // window.localStorage.setItem('seriesData', this.seriesData)
          window.localStorage.setItem('xAxisDataAlias', JSON.stringify(this.xAxisData))
          window.localStorage.setItem('seriesDataScore', JSON.stringify(this.seriesData))
        }
      })
    }

  },
  created () {
    this.init()
  },
  components: {
    TopView,
    TopTag,
    TopScore
  },
  // 当页面上的元素渲染完毕才能开始实例化
  mounted () {

  }
}
</script>

<style lang="less" scoped>
.bbc{
  height: 100vh;
  background-color: rgb(255, 255, 255);

}

</style>
